require(['./config'], function () {
  require(['jquery', 'template', 'loadHF'], function ($, template) {
    class Cart {
      constructor() {
        this.cart = JSON.parse(localStorage.cart) || []
        this.initCart()
        // 事件监听
        this.addListener()
      }
      // 初始化渲染购物车
      initCart () {
        // 如果购物车数组为空，那么就显示为空时显示的内容，隐藏掉购物车部分
        if (this.cart.length === 0) {
          $(".cart-empty").show()
            .next().hide()//是知识点一：可以链式调用的
          return
        }
        // 购物车非空
        $(".cart-empty").hide()
          .next().removeClass('hidden')//知识点二：移除class
        // 拿到数据渲染购物车
        const html = template('cart-template', { cart: this.cart })
        $(".cart-body").html(html)
      }
      // 添加事件监听
      addListener () {
        // 删除
        $(".cart-body").on('click', '.del', this.deleHandler.bind(this))
        // 加减数量
        $(".cart-body").on('click', '.increment,.decrement', this.modifyHandler.bind(this))
        // 输入修改数量
        $(".cart-body").on("blur", ".prod-amount", this.modifyHandler.bind(this))
        // 全选
        $('.chk-all').on("click", this.checkallHandler.bind(this))
        // 部分选中
        $('.cart-body').on("click", ".chk-prod", this.checkProdHandler.bind(this))
      }
      // 删除处理
      deleHandler (e) {
        console.log(this)
        // 获取待删除的行
        const _tr = $(e.target).parents('tr')
        // 获取待删除行的商品id
        const _id = _tr.data("id")
        // 从购物车数组中删除对应ID的商品元素，（删除先删除用户看不见的再删除用户能看见的）
        this.cart = this.cart.filter(prod => prod.id !== _id)
        // 从存储的结果中移除所对应表示的商品
        // localStorage.cart = this.cart
        localStorage.cart = JSON.stringify(this.cart)
        // 从DOM树中删除行
        _tr.remove()
        this.calcTotalPrice()
      }
      // 输入修改数量
      modifyHandler (e) {
        // 获取修改数量的行
        const _tr = $(e.target).parents('tr')
        // 获取修改数量对应商品的ID，
        const _id = _tr.data("id")
        // 将购物车数组中对应元素的数量更新
        const prod = this.cart.find(curr => curr.id === _id)
        if ($(e.target).is('.increment')) {
          prod.amount++
        } else if ($(e.target).is('.decrement')) {
          if (prod.amount > 1) {
            prod.amount--
          }
        } else if ($(e.target).is(".prod-amount")) {
          // 获取输入的值
          const _val = $(e.target).val()
          // 判断输入是否合法
          if (!/^[1-9]\d*$/.test(_val)) {//输入的不是整数数字，那么久显示原始的值
            $(e.target).val(prod.amount)
            return
          }
          prod.amount = Number(_val)
        }
        // 保存到localStrage中
        localStorage.cart = JSON.stringify(this.cart)
        // 更新显示视图（修改后的数量和小计）
        _tr.find('.prod-amount').val(prod.amount)
        _tr.find('.sub').text((prod.amount * prod.price).toFixed(2))
        this.calcTotalPrice()
      }
      // 全选，取消全选
      checkallHandler (e) {
        // console.log(e)
        // 获取全选复选框的状态
        const _status = $(e.target).prop('checked')
        $(".chk-prod").prop("checked", _status)
        this.calcTotalPrice()
      }
      // 部分选中
      checkProdHandler (e) {
        $('.chk-all').prop("checked", $(".chk-prod:checked").length === this.cart.length)
        this.calcTotalPrice()
      }
      // 计算合计金额
      calcTotalPrice () {
        let sum = 0
        $(".chk-prod:checked").each((index, ele) => {
          sum += Number($(ele).parents('tr').find('.sub').text())
        })
        $(".total-price").text(sum.toFixed(2))
      }
    }
    new Cart
  })
})